<template>
  <a-tag
    class="enable"
    :color="props.enable === 1 ? `rgb(var(--green-1))` : 'rgb(var(--danger-1))'"
    :style="{
      color:
        props.enable === 1 ? `rgb(var(--green-6))` : 'rgb(var(--danger-6))',
      '--enable':
        props.enable === 1 ? `rgb(var(--green-6))` : 'rgb(var(--danger-6))'
    }"
  >
    {{ props.lable }}
  </a-tag>
</template>
<script setup lang="ts">
const props = withDefaults(
  // 参数说明
  defineProps<{
    enable?: boolean;
    lable?: string;
  }>(),
  {}
);
</script>
<style scoped lang="less">
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}
</style>
